<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        .a{
            background-image: url("image/2.jpg");
            background-size: 100%;
            margin: auto;
            width: 400px;
            height: 450px;
        }
        #time{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="a">
    <div id="time"></div>
    <button id="start">开始</button>
    <button id="c">换张图片</button>
    <button id="stop" disabled="disabled">暂停</button>
</div>
</body>
</html>
<script>
        document.getElementById("time").innerText = `当前时间是:${new Date().toLocaleString()}`;
    let time;
    //开始的按钮
    document.getElementById("start").onclick = function () {
        //设置开始按钮不可用 暂停按钮可用
        document.getElementById("stop").disabled = false;
        document.getElementById("start").disabled = true;
        time = window.setInterval(function () {
            document.getElementById("time").innerText = `当前时间是:${new Date().toLocaleString()}`;
        },1000);
    }
    //暂停按钮
    document.getElementById("stop").onclick = function () {
        document.getElementById("stop").disabled = true;
        document.getElementById("start").disabled = false;
        //停止计时器
        window.clearInterval(time);
    }
    //下一张背景图片
    document.getElementById("c").onclick = function () {
        document.getElementsByClassName("a")
    }
</script>